<template>
  <div class="page">
    <a-breadcrumb style="margin-bottom:12px">
      <a-breadcrumb-item><router-link to="/">首页</router-link></a-breadcrumb-item>
      <a-breadcrumb-item>全部标签</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card>
      <a-list :grid="{ gutter: 16, xs: 2, sm: 3, md: 4, lg: 6 }" :data-source="tags" :loading="loading" :locale="{emptyText:'暂无标签'}">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-tag @click="go(item.id)" style="cursor:pointer"># {{ item.name }}</a-tag>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { fetchTags } from '@/api/public/articles'
import type { TagVO } from '@/types/api'
import { useRouter } from 'vue-router'

const router = useRouter()
const tags = ref<TagVO[]>([])
const loading = ref(false)

async function load() {
  loading.value = true
  try {
    const { data } = await fetchTags()
    tags.value = data || []
  } finally {
    loading.value = false
  }
}

function go(id: number) {
  router.push({ name: 'TagPage', params: { id } })
}

onMounted(load)
</script>

<style scoped>
.page { max-width: 960px; margin: 0 auto; padding: 12px; }
</style>
